<template>
  <view class="content">
    <view class="gradient-bg">
      <!-- 渐变背景 -->
      <view class="list-card-wrap">
        <view class="flex-row-between" style="margin-bottom: 8rpx;">
          <view class="flex-row">
            <text class="white-text font-24">单据编号</text>
            <text class="white-text font-24" style="margin-left: 20rpx;">{{taskInfo.bizNo}}</text>
          </view>
          <view class="tag-gray"></view>
        </view>
        <view class="list-card">
          <view class="">
            <text class="black-text-34">{{taskInfo.supplierName}}</text>
          </view>
          <view class="content-blue flex-row">
            <view class="flex-column flex1">
              <text class="gray-text">需求数量</text>
              <text class="black-text">{{taskInfo.totalQty}}</text>
            </view>
            <view class="split"></view>
            <view class="flex-column flex1">
              <text class="gray-text">收货总数</text>
              <text class="black-text">{{taskInfo.checkTotalQty}}</text>
            </view>
          </view>
          <view class="">
            <view class="flex-row-between">
              <text class="gray-text">创建时间</text>
              <text class="gray-text">{{taskInfo.createTime}}</text>
            </view>
            <view class="flex-row-between">
              <text class="gray-text">完成时间</text>
              <text class="gray-text">{{taskInfo.completeTime}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- <view scroll-y style="height: calc(100vh - 377rpx);"> -->
    <view scroll-x class="table-wrap">
      <zb-table :show-header="true" :columns="column" :fit="true" :border="true" :data="detailData">
      </zb-table>
    </view>
    <!-- </view> -->

  </view>
</template>

<script>

import {
  getTaskInfoById,
  getBillReceiveDetailList
} from "./api"

export default {
  onLoad(option) {
    this.taskId = option.id;
  },
  created() {
    this.getTaskDetail();
  },
  data() {
    return {
      taskId:'',
      taskInfo:{},
      detailData:[],
      column: [
        { type:'index', label: '序号', align: 'center', width:54 },
        // {
        //   name: 'trayNo',
        //   label: '托盘号',
        //   sorter: false,
        // },
        {
          name: 'productNo',
          label: '物料编号',
          fixed: false,
          emptyString: '--'
        },
        {
          name: 'productName',
          label: '物料名称',
          sorter: false,
        },
        {
          name: 'qty',
          label: '需求数量'
        },
		{
		  name: 'productUnit',
		  label: '物料单位'
		},
      ],
    }
  },
  methods:{
    getTaskDetail(){
      getTaskInfoById(this.taskId).then(res => {
        if (res.code == 200) {
          this.taskInfo = res.data
          // 继续查询收货任务明细
          getBillReceiveDetailList({
            bizNo:this.taskInfo.bizNo,
			pageNum:1,
			pageSize: 999
          }).then(res => {
            if (res.code == 200) {
              this.detailData = res.rows;
            }
          })
        }
      })
    },
  }
}
</script>

<style>
page {
  background-color: #F8F8F8;
}
</style>
<style scoped>

</style>
